<template>
	<!-- 提现 -->
	<view class="pd20 mt-2">
		<view class="d-flex a-center j-sb p-2"
			style="border: 1rpx solid #efefef;border-radius: 10rpx; background: #fff;">
			<view class="">
				<view class="font-30">
					可提现余额(元)
				</view>
				<view class="font-60 font-weight-700 mt-2">
					{{user.money || 0}}
				</view>
			</view>

			<view @tap="showModal" class="d-flex a-center j-center"
				style="border-radius: 20rpx; height: 60rpx;color: #fff; width: 160rpx;background: #2cabff;">
				提现
			</view>
		</view>
		
		<view  class="mt-3" style="border: 1rpx solid #f0f0f0;border-radius: 10rpx; radius shadow bg-white">
			<view @tap="toRecord('/pages/my/withdraw/withdraw-record')" class="d-flex a-center j-sb mb px-2 py-3"
				style=" background: #fff;">
				<view class="d-flex a-center ">
					<image src="" style="width: 30rpx;height: 30rpx;" class="mr-2" mode=""></image>
					<view class="font-30  ">
						提现记录
					</view>
				</view>

				<view class="d-flex a-center j-center color-hui">
					>
				</view>
			</view>			

			<view @tap="toRecord('/pages/my/withdraw/earnings-record')" class="d-flex a-center j-sb px-2 py-3"
				style="background: #fff;">
				<view class="d-flex a-center ">
					<image src="" style="width: 30rpx;height: 30rpx;" class="mr-2" mode=""></image>
					<view class="font-30  ">
						收益记录
					</view>
				</view>

				<view class="d-flex a-center j-center color-hui">
					>
				</view>
			</view>
		</view>




		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar">
					<view style="padding: 0 50rpx;font-size: 40rpx;font-weight: bold;color: #000;">提现</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="nwe-home-form">
					<view class="nwe-home-item">
						<view class="left">
							提现金额
						</view>
						<view class="right">
							<!--  -->
							<input type="text" style="background: #ccc;" disabled="true" v-model="form.money" 
								placeholder="请输入提现金额">
						</view>
					</view>
					<view class="nwe-home-item">
						<view class="left">
							微信号
						</view>
						<view class="right">
							<input type="text" v-model="form.wxCode" placeholder="请输入微信号">
						</view>
					</view>
					<!-- 					<view class="nwe-home-item">
						<view class="left">
							主页头像
						</view>
						<view class="right">
							<image @tap="upImg" :src="framerForm.home_profile"
								style="margin-right:20rpx;border-radius: 50%;width: 150rpx;height: 150rpx;background: #ccc;"
								mode=""></image>
							<view class="opt-btn-box" @tap="upImg">
								上传头像
							</view>
						</view>

					</view> -->
					<!-- 	<view class="nwe-home-item" v-if="showModalType != 'set'">
						<view class="left">
							页面口令
						</view>
						<view class="right" style="position: relative;">
							<input type="number" v-model="framerForm.home_code" style="padding-right: 180rpx;"
								placeholder="请输入主页名称">
							<view @tap="detectionCode" class="opt-btn-box"
								style="border: 1rpx solid #ff6d59; position: absolute;right: 20rpx;top: 50%;transform: translateY(-50%);">
								立即检测
							</view>
						</view>
					</view> -->
				</view>
				<view class="nwe-home-form-bottom">
					<view class="left" @tap="hideModal">
						取消
					</view>
					<view class="right" @tap="affirmAddFramer">
						确认
					</view>
				</view>
			</view>


		</view>


	</view>


</template>

<script>
	export default {
		data() {
			return {
				user: {},
				modalName: "",
				form: {
					money: "",
					wxCode: ''
				}
			}
		},
		onLoad() {

		},
		async onShow() {
			var user = uni.getStorageSync('user')
			if (user.openid) {
				await this.$getUser()
				var user1 = uni.getStorageSync('user')
				if (user1.openid) {
					this.user = user1
					this.form.money = user1.money
					console.log(this.user1)
				}
			} else {
				uni.navigateTo({
					url: "/pages/my/login/login"
				})
			}
		},
		methods: {
			toRecord(url){
				uni.navigateTo({
					url:url
				})
			},
			// 更新用户金额
			async upUser() {
				var userInfo = uni.getStorageSync('user') || {}
				var data = await this.$api.setData({
					dbName: "uni-id-users",
					whereJson: {
						openid: userInfo.openid
					},
					dataJson: {
						money: Number(userInfo.money) - Number(this.form.money)
					}
				})
				this.form = {}
				this.$getUser(()=>{
					this.user = uni.getStorageSync('user')
				})
			},
			// 提交提现
			async affirmAddFramer() {
				let form = this.form
				if (form.money < 10) {
					uni.showToast({
						title: "提现金额必须大于10元",
						icon: "none"
					})
					return
				}
				var money = this.$U.reg.isEmpty(form.money, '金额不能为空')

				if (money) {
					return
				}
				var wxCode = this.$U.reg.isEmpty(form.wxCode, '微信号不能为空')

				if (wxCode) {
					return
				}

				var userInfo = uni.getStorageSync('user') || {}
				var data = await this.$api.addData({
					dbName: "wx_withdraw",
					dataJson: {
						...this.form,
						money:Number(form.money),
						userInfo: userInfo,
						openid:userInfo.openid,
						status: 2,
						time:new Date().getTime()
					}
				})
				if (data.code == 0) {
					this.upUser()
					uni.showToast({
						title: "提交成功，待审核"
					})
					setTimeout(() => {
						this.hideModal()
					}, 500)
				}


			},
			showModal(type) {
				this.modalName = "Modal"

			},
			hideModal(e) {
				this.modalName = null
			},
		}
	}
</script>

<style>
	page {
		background: #fcfcfc;
	}
</style>

<style lang="scss" scoped>
	.nwe-home-form-bottom {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;

		view {
			color: #fff;
			margin: 0 20rpx;
			padding: 25rpx 80rpx;
			border-radius: 20rpx;
			background: #ff6d59;
		}

		.left {
			color: #50536e;
			background: #f5f6fa
		}
	}

	.nwe-home-form {
		font-size: 28rpx;
		color: #000;
		padding: 0 50rpx;

		.nwe-home-item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.opt-btn-box {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #fff0ee;
				color: #ff806f;
				border-radius: 20rpx;
				padding: 10rpx 10rpx;
			}

			.right {
				margin-left: 30rpx;
				display: flex;
				align-items: center;

				input {
					text-align: left;
					width: 430rpx;
					height: 90rpx;
					background: #f5f6fa;
					padding: 5rpx 30rpx;
					font-size: 28rpx;
					border-radius: 30rpx;
				}
			}
		}
	}
</style>
